<template>
	<view class="container" v-if="choices!=undefined">
		<view class="top-module">
			<view class="desc">
				系统根据你选择的知识点及题量，智能从系统中随机抽取试题，错误率高的题目会使量增加，以提升你的综合能力
			</view>
			<!-- <v-check v-if="item.type=='point'" v-for="(item,index) in choices" :key="item.value" :dataSource="item" @change="checkChange"></v-check> -->
		<!-- 	<v-radio class="amout" v-if="item.type=='amount'" v-for="(item,index) in choices" :key="item.value" :dataSource="item"
			 @change="radioChange"></v-radio> -->
			
			<view class="checkcontent" v-if="item.type=='point'" v-for="(item,index) in choices" :key="item.value"  >
			 	<view class="title">{{item.title}}</view>
			 	<checkbox-group class="content" @change="checkChange($event,item)">
			 		<label class="check" v-for="(v,index) in item.options" :key="index">
			 			<checkbox class="box" :value="v.value" />
			 			<text class="text">{{v.name}}</text>
			 		</label>
			 	</checkbox-group>
			 </view>
			 
			 
			 <view class="amout" v-if="item.type=='amount'" v-for="(item,index) in choices" :key="item.value" :dataSource="item"
			 >
			 	<view class="title">{{item.title}}</view>
			 	<scroll-view class="content">
			 		<radio-group @change="radioChange($event,item)">
			 			<label class="radio" v-for="(v,index) in item.options" :key="index">
			 			<radio :value="v.value" />{{v.name}}</label>
			 		</radio-group>
			 	</scroll-view>
			 </view>
		</view>
		<view class="bottom-module">
			<button class="start-btn" @click="start">开始答题</button>
		</view>
	</view>
</template>

<script>
	import vRadio from './fragments/vradio';
	import vCheck from './fragments/vcheck';
	import ExamService from '@/services/exam/exam';
	const examService = new ExamService();
	export default {
		components: {
			vRadio,
			vCheck
		},
		data() {
			return {
				param: {
					pointType: undefined,
					amount: undefined,
					ascription: undefined
				},
				choices: undefined
			}
		},
		onLoad(query) {
			this.param.ascription = query.ascription;
			this.loadData(query.ascription);
		},
		//历史答题
		onNavigationBarButtonTap(e) {
			uni.redirectTo({
				url: "/pages/exam/history?ascription="+this.param.ascription
					+"&examType=4&resultType=2"
			})
		},
		methods: {
			loadData(ascription) {
				examService.smartTestChoices(ascription).then(response => {
					if (response.success) {
						this.choices = response.result;
					} else {
						uni.showToast({
							title: response.message,
							duration: 2000,
							icon: "none"
						})
					}
				})
			},
			checkChange(e,item) {
				// const {
				// 	type,
				// 	value
				// } = arg;
				// console.log(e)
				// console.log(item)
				let arg = {
					type: item.type,
					value: e.detail.value
				}
				this.param.pointType = arg.value.join(",");
				console.log(this.param.pointType);
			},
			radioChange(e,item) {
				// const {
				// 	type,
				// 	value
				// } = arg;
				let arg = {
					type:item.type,
					value:e.target.value
				}
				this.param.amount = arg.value;
			},
			/**
			 * 开始答题
			 */
			start() {
				const {
					pointType,
					amount,
					ascription
				} = this.param;
				if (pointType == undefined || pointType == '') {
					uni.showToast({
						title: "请选择知识点类型",
						duration: 2000,
						icon: "none"
					});
					return
				}
				if (amount == undefined) {
					uni.showToast({
						title: "请选择题量",
						duration: 2000,
						icon: "none"
					})
					return
				}
				uni.redirectTo({
					url: '/pages/exam/examsub?examType=2&pointType=' + pointType +
						"&amount=" + amount +
						"&ascription=" + ascription
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		padding: 0 20upx;
	}

	.desc {
		font-size: 28upx;
		color: #666666;
		padding-top: 40upx;
	}

	.amout {
		// margin-bottom: 180upx;
	}
	.top-module{
		padding-bottom: 180upx;
	}

	.bottom-module {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.start-btn {
		margin-top: 60upx;
		width: 610upx;
		height: 80upx;
		background-color: #5ea1f8;
		border-radius: 8upx;
		font-size: 28upx;
		color: #ffffff;
		margin-bottom: 20upx;
	}
	
	.title {
		font-size: 30upx;
		color: #333333;
		padding-top: 60upx;
		font-weight: 600;
	}
	
	.content {
		background-color: #ffffff;
		box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.2);
		border-radius: 8px;
		border: solid 1px #f7f7f7;
		padding: 20upx 40upx;
		margin-top: 40upx;
	}
	.check {
		font-size: 28upx;
		color: #333333;
		min-width: 50%;
		padding: 20upx 20upx 0 0;
		vertical-align: top;
		display: inline-flex;
	}
	.text{
		flex: 1;
	}
	
	.title {
		font-size: 30upx;
		color: #333333;
		padding-top: 60upx;
		font-weight: 600;
	}
	
	.content {
		max-height: 800upx;
		background-color: #ffffff;
		box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.2);
		border-radius: 8px;
		border: solid 1px #f7f7f7;
		padding: 20upx 40upx;
		margin-top: 40upx;
	}
	
	.radio {
		font-size: 28upx;
		color: #333333;
		display: inline-block;
		width: 50%;
		padding: 20upx 20upx 0 0;
	}
	.checkcontent{
		height: auto;
	}
</style>
